{% macro node_name() %}
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="form_name">{{ "Node Name"|trans }} </label>
        <div class="col-sm-9">
            <input id="form_name" class="col-sm-6 input-sm" type="text" readonly="readonly" name="form[name]">
        </div>
    </div>
{% endmacro %}

{% macro play_sound(lable_title,id,sounds_type,sounds_list,is_required = true) %}
    <div class="form-group">
        <label for="form_sound_sound" class="col-sm-3 control-label no-padding-right">{{ lable_title|trans }} {% if is_required == true %}<font color="red">*</font> {% endif %}</label>
        <div class="col-sm-9" id="form_{{ id }}">
            <div id="form_{{ id }}0" class="col-sm-12" style="margin-left: -13px;margin-bottom:1px">
                <select id="form_{{ id }}_sound_type0" name="form[sound][sound]" class="sounds_type col-sm-3 input-sm">
                    {% for key, sounds_type in sounds_type %}
                        <option value="{{ key }}">
                            {{ sounds_type|trans }}
                        </option>
                    {% endfor %}
                </select>
                <select id="form_{{ id }}_sound_list0" class="sound_list col-sm-5 input-sm">
                    <option value="">{{ "Please Select Sound"|trans }}</option>
                    {% for sound in sounds_list %}
                        <option value="{{ sound.address }}">
                            {{ sound.name }}
                        </option>
                    {% endfor %}
                </select>
                <select id="form_{{ id }}_sound_number0" class="hidden sound_number col-sm-5 input-sm">
                    <option value="">请选择一个数字变量</option>
                </select>
                <button id="form_{{ id }}_sound_add" class="btn btn-info btn-xs add" type="button" title="{{ 'Add sound list'|trans }}">
                    <i class="ace-icon fa fa-plus"></i>
                </button>
                <button id="form_{{ id }}_sound_refresh0" class="btn btn-info btn-xs sound_refresh" type="button" title="{{ 'Refresh sound list'|trans }}">
                    <i class="ace-icon fa fa-refresh"></i>
                </button>
                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "system variable name help"|trans }}" title="" data-original-title="">?</span>
            </div>
            <audio id="form_{{ id }}_player" style="margin-top: 8px;color: white" controls="controls">
                {{ 'Your browser does not support this player!'|trans }}
            </audio>
        </div>
    </div>
    <script type="application/javascript">

        setVariableOption($("#form_{{ id }}"+"_sound_number0"));


        /**
         * 语音数量
         * @type {number}
         */

        /**
         * 语音类型改变事件
         */
        $('#form_{{ id }}'+'_sound_type0').on('change', function() {
            var value = $(this).val();
            var $list = $(this).siblings('.sound_list');
            var $refresh = $(this).siblings('.sound_refresh');
            var $number = $(this).siblings('.sound_number');

            switch (value) {
                case '1'://语音列表
                    $list.removeClass('hidden');
                    $refresh.removeClass('hidden');
                    $number.addClass('hidden');
                    break;
                case '2'://数字
                case '3'://数字变量
                case '4'://tts
                    $list.addClass('hidden');
                    $refresh.addClass('hidden');
                    $number.removeClass('hidden').val('').attr('placeholder', '{{ "Numbers Variable Name"|trans }}');
                    break;
            }
        });

        /**
         * 刷新语音列表
         */
        $('#form_{{ id }}'+'_sound_refresh0').on('click', function() {
            var $list = $(this).siblings('.sound_list')
            $.ajax({
                url: "{{ path('icsoc_ivr_sound_refresh') }}",
                dataType: 'json',
                type: 'post',
                async:false,
                success: function(response) {
                    $list.empty().append("<option value=''>{{ 'Please Select Sound'|trans }}</option>");
                    $.each(response, function(index, value) {
                        $list.append("<option value='"+value.address+"' address='"+value.address+"'>"+value.name+"</option>");
                    });
                }
            });
        });

        /**
         * 收听语音
         */
        $('#form_{{ id }}'+'_sound_list0').on('change', function() {
            var file = $(this).val();
            if (file) {
                var url = "{{ path('icsoc_ivr_sound_play', {'file': 'placeholder_file'}) }}";
                url = url.replace('placeholder_file', file);
                $('#form_{{ id }}'+'_player').attr('src', url);
                $('#form_{{ id }}'+'_player').attr('autoplay', 'autoplay');
            } else {
                $('#form_{{ id }}'+'_player').removeAttr('src');
            }
        });

        /**
         * 添加语音
         */

        $('#form_'+'{{ id }}_sound_add').on('click', function() {

            if ($("#form_{{ id }}").children().length > 20) {
                gritterAlert("{{ 'Alert'|trans }}", "{{ 'add sound alert info'|trans }}", 'info');
                return false;
            }

            sound_list["{{ id }}"]++;

            var $content = $('<div id="form_{{ id }}'+sound_list["{{ id }}"]+'" class="col-sm-12" style="margin-left: -13px;margin-bottom:1px">\
                    <select id="form_{{ id }}'+'_sound_type'+sound_list["{{ id }}"]+'" name="form[sound][sound]" class="sound_type col-sm-3 input-sm">\
                        {% for key, sounds_type in sounds_type %}<option value="{{ key }}">{{ sounds_type|trans }}</option>{% endfor %}\
                    </select>\
                    <select id="form_{{ id }}'+'_sound_list'+sound_list["{{ id }}"]+'" class="sound_list col-sm-5 input-sm">\
                        <option value="">{{ 'Please Select Sound'|trans }}</option>\
                        {% for sound in sounds_list %} <option value="{{ sound.address }}">{{ sound.name|trans }} </option>{% endfor %}\
                    </select>\
                    <select id="form_{{ id }}'+'_sound_number'+sound_list["{{ id }}"]+'" class="hidden sound_number col-sm-5 input-sm">\
                        <option value="">请选择一个数字变量</option>\
                    </select>\
                    <button id="form_{{ id }}'+'_minus'+sound_list["{{ id }}"]+'" class="btn btn-info btn-xs minus" type="button" title="{{ 'Del sound list'|trans }}">\
                            <i class="ace-icon fa fa-minus"></i>\
                    </button>\
                    <button id="form_{{ id }}'+'_sound_refresh'+sound_list["{{ id }}"]+'" class="btn btn-info btn-xs sound_refresh" type="button" title="{{ 'Refresh sound list'|trans }}">\
                    <i class="ace-icon fa fa-refresh"></i>\
                    </button>\
                </div><br');

            $content.insertBefore($('#form_{{ id }}'+'_player'));

            setVariableOption($("#form_{{ id }}"+"_sound_number"+sound_list["{{ id }}"]));

            $('#form_{{ id }}'+'_minus'+sound_list["{{ id }}"]).on('click', function() {
                $(this).parent().remove();
            });

            $('#form_{{ id }}'+'_sound_type'+sound_list["{{ id }}"]).on('change', function() {
                var value = $(this).val();
                var $list = $(this).siblings('.sound_list');
                var $refresh = $(this).siblings('.sound_refresh');
                var $number = $(this).siblings('.sound_number');

                switch (value) {
                    case '1'://语音列表
                        $list.removeClass('hidden');
                        $refresh.removeClass('hidden');
                        $number.addClass('hidden');
                        break;
                    case '2'://数字
                    case '3'://数字变量
                    case '4'://tts
                        $list.addClass('hidden');
                        $refresh.addClass('hidden');
                        $number.removeClass('hidden').val('').attr('placeholder', '{{ "Numbers Variable Name"|trans }}');
                        break;
                }
            });

            //刷新语音列表
            $('#form_{{ id }}'+'_sound_refresh'+sound_list["{{ id }}"]).on('click', function() {
                var $list = $(this).siblings('.sound_list')
                $.ajax({
                    url: "{{ path('icsoc_ivr_sound_refresh') }}",
                    dataType: 'json',
                    type: 'post',
                    async:false,
                    success: function(response) {
                        $list.empty().append("<option value=''>{{ 'Please Select Sound'|trans }}</option>");
                        $.each(response, function(index, value) {
                            $list.append("<option value='"+value.address+"' address='"+value.address+"'>"+value.name+"</option>");
                        });
                    }
                });
            });

            /**
             * 收听语音
             */
            $('#form_{{ id }}'+'_sound_list'+sound_list["{{ id }}"]).on('change', function() {
                var file = $(this).val();
                if (file) {
                    var url = "{{ path('icsoc_ivr_sound_play', {'file': 'placeholder_file'}) }}";
                    url = url.replace('placeholder_file', file);
                    $('#form_{{ id }}'+'_player').attr('src', url);
                    $('#form_{{ id }}'+'_player').attr('autoplay', 'autoplay');
                } else {
                    $('#form_{{ id }}'+'_player').removeAttr('src');
                }
            });
        });

        /**
         * 处理语音字段的显示
         *
         * @param {array} treeNodeChild
         * @param widgetName
         * @param prefix
         */
        function handleSoundView(treeNodeChild, widgetName, prefix) {
            if (treeNodeChild[prefix]) {
                $.each(treeNodeChild[prefix],function(index,childNode){

                    var $content = $('<div id="form_'+widgetName+index+'" class="col-sm-12" style="margin-left: -13px;margin-bottom:1px">\
                    <select id="form_'+widgetName+'_sound_type'+index+'" name="form[sound][sound]" class="sound_type col-sm-3 input-sm">\
                        {% for key, sounds_type in sounds_type %}<option value="{{ key }}">{{ sounds_type|trans }}</option>{% endfor %}\
                    </select>\
                    <select id="form_'+widgetName+'_sound_list'+index+'" class="sound_list col-sm-5 input-sm">\
                        <option value="">{{ 'Please Select Sound'|trans }}</option>\
                        {% for sound in sounds_list %} <option value="{{ sound.address }}">{{ sound.name|trans }} </option>{% endfor %}\
                    </select>\
                    <select id="form_'+widgetName+'_sound_number'+index+'" class="hidden sound_number col-sm-5 input-sm">\
                        <option value="">请选择一个数字变量</option>\
                    </select>\
                    <button id="form_'+widgetName+'_minus'+index+'" class="btn btn-info btn-xs minus" type="button" title="{{ 'Del sound list'|trans }}">\
                            <i class="ace-icon fa fa-minus"></i>\
                    </button>\
                     <button id="form_'+widgetName+'_sound_refresh'+index+'" class="btn btn-info btn-xs sound_refresh" type="button" title="{{ 'Refresh sound list'|trans }}">\
                    <i class="ace-icon fa fa-refresh"></i>\
                    </button>\
                </div><br');

                    if (index != 0 ) {
                        $content.insertBefore($('#form_'+widgetName+'_player'));
                    }

                    setVariableOption($('#form_'+widgetName+'_sound_number'+index));

                    $('#form_'+widgetName+'_sound_type'+index).val(childNode.sound_type);//设置语音类型

                    var $list = $('#form_'+widgetName+'_sound_list'+index);
                    var $refresh = $('#form_'+widgetName+'_sound_refresh'+index);
                    var $number = $('#form_'+widgetName+'_sound_number'+index);
                    switch (childNode.sound_type){
                        case '1'://语音列表
                            $list.removeClass('hidden').val(childNode.sound_list || '');
                            $refresh.removeClass('hidden');
                            $number.addClass('hidden');
                            break;
                        case '2'://数字
                        case '3'://数字变量
                        case '4'://tts
                            $list.addClass('hidden');
                            $refresh.addClass('hidden');
                            $number.removeClass('hidden').val(childNode.sound_number || '');
                            break;
                    }

                    $('#form_'+widgetName+'_sound_type'+index).on('change', function() {
                        var value = $(this).val();
                        var $list = $(this).siblings('.sound_list');
                        var $refresh = $(this).siblings('.sound_refresh');
                        var $number = $(this).siblings('.sound_number');

                        switch (value) {
                            case '1'://语音列表
                                $list.removeClass('hidden');
                                $refresh.removeClass('hidden');
                                $number.addClass('hidden');
                                break;
                            case '2'://数字
                            case '3'://数字变量
                            case '4'://tts
                                $list.addClass('hidden');
                                $refresh.addClass('hidden');
                                $number.removeClass('hidden').val('').attr('placeholder', '{{ "Numbers Variable Name"|trans }}');
                                break;
                        }
                    });

                    /**
                     * 收听语音
                     */
                    $('#form_'+widgetName+'_sound_list'+index).on('change', function() {
                        var file = $(this).val();
                        if (file) {
                            var url = "{{ path('icsoc_ivr_sound_play', {'file': 'placeholder_file'}) }}";
                            url = url.replace('placeholder_file', file);
                            $('#form_'+widgetName+'_player').attr('src', url);
                            $('#form_'+widgetName+'_player').attr('autoplay', 'autoplay');
                        } else {
                            $('#form_'+widgetName+'_player').removeAttr('src');
                        }
                    });

                    $('#form_'+widgetName+'_minus'+index).on('click', function() {
                        $(this).parent().remove();
                    });

                    if (index == 0 && childNode.sound_type == 1) {
                        var file= childNode.sound_list;
                        var url = "{{ path('icsoc_ivr_sound_play', {'file': 'placeholder_file'}) }}";
                        url = url.replace('placeholder_file', file);
                        $('#form_'+widgetName+'_player').attr('src', url);
                    }

                    index++;
                    sound_list[widgetName] = index;
                });
            }
        }

    </script>
{% endmacro %}

{% macro jump_nodes(nodes,lable_title = 'Go To') %}
    <div class="form-group">
        <label for="form_jump_nodes" class="col-sm-3 control-label no-padding-right">{{ lable_title|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <select id="form_jump_nodes" name="form[jump][nodes]" required="required" class="chosen-select col-sm-6">
                <option value="" selected="selected">{{ 'Choose a Node'|trans }}</option>
                {% for k, node in nodes %}
                    <optgroup label="{{ k|trans }}">
                        {% for key, node in node %}
                            <option value="{{ key }}">
                                {{ node|trans }}
                            </option>
                        {% endfor %}
                    </optgroup>
                {% endfor %}
            </select>
        </div>
    </div>
{% endmacro %}

{% macro is_tran_front() %}
    <div class="form-group" id="is_tran_front_div">
        <label class="col-sm-3 control-label no-padding-right" for="is_tran_front">{{ "variable Whether to the front"|trans }} </label>
        <div class="col-sm-9">
            <label class="radio-inline"><input type="radio" value="0" name="is_tran_front">{{ 'no'|trans }}</label>
            <label class="radio-inline"><input type="radio" value="1" name="is_tran_front">{{ 'yes'|trans }}</label>
        </div>
    </div>
{% endmacro %}

{% macro ivr_count() %}
    <div class="form-group">
        <label for="form_ivr_count" class="col-sm-3 control-label no-padding-right">是否需要统计</label>
        <div class="col-sm-9">
            <select id="ivr_count_id" name="form_ivr_count" required="required" class="col-sm-2">
                <option value="1" >是</option>
                <option value="2" selected="selected">否</option>
            </select>
            <input type="text" class="col-sm-4 input-sm" name="ivr_count_name" id="ivr_count_name" value="" />
        </div>
    </div>
{% endmacro %}

{% macro form_api(api_method, api_timeout) %}
    <div class="form-group" data-text="form-api">
        <label for="form_api_url" class="col-sm-3 control-label no-padding-right">{{ "Api url"|trans }} <font color="red">*</font> </label>
        <div class="col-sm-9">
            <input type="url" id="form_api_url" name="form[api_url]" class="col-sm-6 input-sm">
            <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ "http api_url help"|trans }}" title="" data-original-title="">?</span>
        </div>
    </div>
    <div class="form-group" data-text="form-api">
        <label for="form_api_params" class="col-sm-3 control-label no-padding-right">{{ "Api params"|trans }}   </label>
        <div class="col-sm-9" id="form_api_params">
            <div class="hidden" id="form_api_params_clone" style="margin-bottom: 2px">
                <input type="text" name="form[api_params_name]" class="input-sm col-sm-2" placeholder="{{ "Param Name"|trans }}">
                <input type="text" name="form[api_params_value]" datatype="fixed" class="input-sm col-sm-2 hidden" placeholder="{{ "Param Value"|trans }}">
                <select name="form[api_params_type]" title="">
                    <option value="0">{{ "Param Fixed Value"|trans }}</option>
                    <option value="1">{{ "Param variable names"|trans }}</option>
                </select>
                <select name="form[api_params_value]" datatype="variable" class="input-sm col-sm-2 hidden" title=""></select>
                <button class="btn btn-info btn-xs" type="button">
                    <i class="ace-icon fa fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="form-group" data-text="form-api">
        <label for="form_api_method" class="col-sm-3 control-label no-padding-right">{{ "Request method"|trans }} </label>
        <div class="col-sm-9">
            <select id="form_api_method" name="form[api_method]" class="col-sm-6">
                {% for key, request_method in api_method %}
                    <option value="{{ key }}">
                        {{ request_method }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group" data-text="form-api">
        <label for="form_api_timeout" class="col-sm-3 control-label no-padding-right">{{ "Timeout"|trans }} </label>
        <div class="col-sm-9">
            <select id="form_api_timeout" name="form[api_timeout]" class="col-sm-6">
                {% for key, timeout in api_timeout %}
                    <option value="{{ key }}">
                        {{ timeout }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>
    <script type="application/javascript">
        $(document).ready(function() {
            $('#form_api_params').on('click', '.fa-plus', function () {
                setApiParames('minus');
            });

            /**
             * 参数类型改变事件
             */
            $('#form_api_params').on('change', "[name='form[api_params_type]']", function () {
                var value = $(this).val();
                var $params_value = $(this).siblings("[datatype='fixed']");
                var $params_value_variable = $(this).siblings("[datatype='variable']");
                switch(value){
                    case '0':
                        $params_value.removeClass('hidden');
                        $params_value_variable.addClass('hidden');
                        break;
                    case '1':
                        $params_value_variable.removeClass('hidden');
                        $params_value.addClass('hidden');
                        break;
                    default:
                        $params_value.removeClass('hidden');
                        $params_value_variable.addClass('hidden');
                        break;
                }
            });

            /**
             * 删除参数
             */
            $('#form_api_params').on('click', '.fa-minus', function () {
                $(this).parent().parent().remove();
            });
        });

        /**
         * 设置参数
         */
        function setApiParames(type, apiParamsValue) {
            if ($('#form_api_params').children().length > 15) {
                gritterAlert("{{ 'Alert'|trans }}", "{{ 'Add parameters overrun'|trans({'%number%': 15}) }}", 'error');
                return false;
            }

            var $clone = $("#form_api_params_clone").clone().removeClass('hidden').removeAttr('id');
            var $params_type = $clone.find("[name='form[api_params_type]']");
            setVariableOption($clone.find("[datatype='variable']"));//将已设置的数字变量写入Option

            if (apiParamsValue) {
                $params_type.val(apiParamsValue.params_type);
                $clone.find("[name='form[api_params_name]']").val(apiParamsValue.params_name);
                $clone.find("[name='form[api_params_type]']").val(apiParamsValue.params_type);
                $clone.find("[datatype='fixed']").val(apiParamsValue.params_value);
                $clone.find("[datatype='variable']").val(apiParamsValue.params_value);
            }

            var params_type = $params_type.val();
            switch (params_type) {
                case '0' :
                    $clone.find("[datatype='fixed']").removeClass('hidden');
                    $clone.find("[datatype='variable']").addClass('hidden');
                    break;
                case '1' :
                    $clone.find("[datatype='variable']").removeClass('hidden');
                    $clone.find("[datatype='fixed']").addClass('hidden');
                    break;
                default :
                    $clone.find("[datatype='fixed']").removeClass('hidden');
                    $clone.find("[datatype='variable']").addClass('hidden');
                    break;
            }

            if (type == 'plus') {
                $clone.find(".fa-plus").addClass('fa-plus').removeClass('fa-minus');
            } else {
                $clone.find(".fa-plus").addClass('fa-minus').removeClass('fa-plus');
            }

            $('#form_api_params').append($clone);
        }
    </script>
{% endmacro %}